import React from 'react';
import Tishi1 from '../img/diy/n1.png'
import Tishi2 from '../img/diy/n2.png'
import Tishi3 from '../img/diy/n3.png'
import {customerInfo,ROOTURL,ROOTAPI} from '../../publicAPI/publicAPI.js'
require('../css/WelcomeLayer.css');
class WelcomeLayer extends React.Component {
	constructor(props) {
	    super(props);
	    this.state = {
	    	changeSkin: false,
	    	skin: '油性皮肤'
	    }
	}
	componentWillMount(){

	}

    componentDidMount(){
    	if(!localStorage.getItem('hasShowLayer')) {
			this.scrollAct();
			document.querySelector(".skin-layer-content").style.visibility = "hidden";
    	}     
    	this.getSkinInfo();
    	this.clickSkin();
    }
    scrollAct(){
	    var touch = document.querySelector(".welcome-layer-content");
	    var SWIPE_DISTANCE = document.body.clientWidth/4;
	    var point_start,
	        point_end;
	    let page = 0;
	    let buttons = document.querySelectorAll(".welcome-layer-buttons span");
	    //计算两点之间距离
	    var getDist = function(p1 , p2){
	        if(!p1 || !p2) return 0;
	        return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
	    }
	    //获取touch的点(兼容mouse事件)
	    var getTouchPos = function(e){
	        var touches = e.touches;
	        if(touches && touches[0]) {
	            return { x : touches[0].clientX ,
	                     y : touches[0].clientY };
	        }
	        return { x : e.clientX , y: e.clientY };
	    }
	    //获取swipe的方向
	    var getSwipeDirection = function(p2,p1){
	        var dx = p2.x - p1.x;
	        var dy = -p2.y + p1.y;    
	        var angle = Math.atan2(dy , dx) * 180 / Math.PI;

	        if(angle < 45 && angle > -45) return true;
	        if(angle >= 45 && angle < 135) return false;
	        if(angle >= 135 || angle < -135) return true;
	        if(angle >= -135 && angle <= -45) return false;

	    }
	    var scorllAction = function(dvalue){
	        if(dvalue > 0){
	        	if(page >= 2){

	        	}else{
					page++;
	        		document.querySelector(".welcome-layer-img").style.transform = "translateX(-"+page*8+"rem)"
        			
	        	}		
	        }else{
	        	if(page <= 0){

	        	}else{
	        		page--;
	        		document.querySelector(".welcome-layer-img").style.transform = "translateX(-"+page*8+"rem)";
	        		
	        	}
	            
	        }
	        for (var i = 0; i < buttons.length ; i++) {
                if( buttons[i].className == 'on'){
                    buttons[i].className = '';
                    break;
                }
            }

            buttons[page].className = 'on';
	       
	    }
	    var startEvtHandler = function(e){
	        var pos = getTouchPos(e);
	        var touches = e.touches; 
	        if( !touches || touches.length == 1 ){ //touches为空，代表鼠标点击
	            point_start = getTouchPos(e);
	            
	        }
	    }
	    var moveEvtHandler = function(e){
	        var pos = getTouchPos(e);
	        point_end = getTouchPos(e);
	        event.preventDefault();
	    }

	    var endEvtHandler = function(e){
	        
	        if(getDist(point_start,point_end) > SWIPE_DISTANCE&&getSwipeDirection(point_start,point_end)){
	           scorllAction(point_start.x-point_end.x);
	        }
	        point_start=0;
	        point_end=0;
	    }

	    //判断是PC或者移动设备
	    var startEvt, moveEvt, endEvt;
	    if("ontouchstart" in window){
	        startEvt="touchstart";
	        moveEvt="touchmove";
	        endEvt="touchend";
	    }else{
	        startEvt="mousedown";
	        moveEvt="mousemove";
	        endEvt="mouseup";            
	    }
	    touch.addEventListener(startEvt, startEvtHandler);
	    touch.addEventListener(moveEvt, moveEvtHandler);
	    touch.addEventListener(endEvt, endEvtHandler);
    }
    getSkinInfo() {
    	var _this=this
    	var getInfo = function() {
    		let { id }=JSON.parse(localStorage.getItem("customerInfo"));
	        var url = ROOTURL + 'customer/info/instance.api?id='+id;
	        fetch(url, {
	                method : 'get',
	                credentials: 'include',
	            }).then(res=>{
	                if(res.ok){
	                    res.json().then(data=>{
	                    	_this.setState({
								changeSkin: true
	                    	})
	                    })
	                }
	        })
    	}
        customerInfo(getInfo);
    }
    clickSkin() {
    	let _this = this;
    	let items = document.querySelectorAll(".skin-layer-content-main-row");
    	for (var i = 0; i < items.length ; i++) {
    		items[i].addEventListener("click",function(e) {
    			clickHandler(this);
    		});
        }
        var clickHandler = function(e) {
        	let p = e.parentNode.children;
        	for(let i =0;i<p.length;i++) {
        		p[i].querySelector(".skin-layer-content-main-radio").getElementsByTagName("i")[0].classList.remove("skin-layer-content-main-radio-active");
        	}
        	e.querySelector(".skin-layer-content-main-radio").getElementsByTagName("i")[0].classList.add("skin-layer-content-main-radio-active");
        	_this.setState({
        		skin: e.querySelector('.skin-layer-content-main-type').innerHTML
        	})
        }
    }
    closeLayer(){
    	document.querySelector(".welcome-layer-content").style.display = "none";
    	document.querySelector(".skin-layer-content").style.visibility = "visible";
    	localStorage.setItem("hasShowLayer", true);
    }
    toMake() {
		let { id } = JSON.parse(localStorage.getItem('customerInfo'));
		let url = ROOTURL + 'customer/info/instance.api';
		this.state.changeSkin?
		fetch(url, {
	            method : 'POST',
	            mode: 'cors',
	            body: JSON.stringify({
	                id: id,
	                skin: this.state.skin
	            })
        }).then(res=>{
            if(res.ok){
                res.json().then(data=>{
                    document.querySelector(".welcome-layer").style.display = "none";
                })
            }
        }) 
		:
		fetch(url, {
	            method : 'POST',
	            mode: 'cors',
	            body: JSON.stringify({
	                customer: id,
	                skin: this.state.skin
	            })
        }).then(res=>{
            if(res.ok){
                res.json().then(data=>{
                    document.querySelector(".welcome-layer").style.display = "none";
                })
            }
        }) 
    }
    render() {
    	let hasShowLayer = localStorage.getItem('hasShowLayer');
        return (	
            <div className="welcome-layer">
           		<div className="welcome-layer-mask"></div>
           		{hasShowLayer?'':
	           		<div className="welcome-layer-content">
	           			<div className="welcome-layer-img">
							<img src={Tishi1}/>
							<img src={Tishi2} style={{left:"8rem"}}/>
							<img src={Tishi3} style={{left:"16rem"}}/>
							<div className="welcome-layer-img-button" onClick={this.closeLayer.bind(this)}></div>
	           			</div>
	           			<div className="welcome-layer-buttons">
					        <span index="1" className="on"></span>
					        <span index="2"></span>
					        <span index="3"></span>
					    </div>
	           		</div>
           		}
                <div className="skin-layer-content">
                	<div  className="skin-layer-content-top">
						<div className="skin-layer-content-title">
			    			<p>为了更好定制适合您的面膜</p>
			    			<p>首先请您选择您的肤质!</p>
			    			<p style={{fontSize:"0.3rem"}}>(请认真选择肤质，"对症下药"效果才是最佳哦)</p>
			    		</div>
			    		<div className="skin-layer-content-main">
			    			<div className="skin-layer-content-main-row"><span className="skin-layer-content-main-radio"><i className="skin-layer-content-main-radio-active"></i></span><span className="skin-layer-content-main-type">油性皮肤</span></div>
			    			<div className="skin-layer-content-main-row"><span className="skin-layer-content-main-radio"><i></i></span><span className="skin-layer-content-main-type">油性皮肤(有痘痘)</span></div>
			    			<div className="skin-layer-content-main-row"><span className="skin-layer-content-main-radio"><i></i></span><span className="skin-layer-content-main-type">中性皮肤</span></div>
			    			<div className="skin-layer-content-main-row"><span className="skin-layer-content-main-radio"><i></i></span><span className="skin-layer-content-main-type">干性皮肤</span></div>
			    		</div>
                	</div>
		    		<div className="skin-layer-content-button" onClick={this.toMake.bind(this)}>开始定制</div>
			    </div>
            </div>
        )
    }
}


export default WelcomeLayer;